<template>
	<view class="container">
		<view class="head">
			<view class="name">{{ranker.username}}</view>
			<image mode="aspectFill" class="image" :src="ranker.imgurl"></image>
		</view>
		<view class="operation">
			<image @click="operation('like')" src="../../static/love.png" class="btn-like"></image>
			<image @click="operation('unlike')" src="../../static/unlove.png" class="btn-unlike"></image>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config';
	export default {
		data() {
			return {
				ranker: {

				},
			}
		},
		methods: {
			onReady() {
				let target = this.$global.personInfo.gender === 0 ? 1 : 0
				const that = this
				// console.log(target);
				uni.request({
					url: config.baseUrl + 'home/rank',
					method: 'POST',
					data: {
						"gender": target,
						"age": this.$global.personInfo.age
					},
					success: (res) => {
						console.log(res);
						let random = that.getRandomInt(0, res.data.length - 1)
						// console.log(res.data[random]);
						that.ranker = res.data[random]
						that.ranker.imgurl = config.baseUrl + res.data[random].imgurl
						// console.log(that.ranker);
					}
				})
			},
			getRandomInt(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			operation(param) {
				let that = this
				if (param == 'like') {
					uni.request({
						url: config.baseUrl + 'operate/goodLove',
						method: 'POST',
						data: {
							"beauty_id": that.ranker.openid,
							"love_id": that.$global.personInfo.openid
						},
						success: (res) => {
							param = 'unlike'
							console.log(res);
							if (res.statusCode == 200) {
								uni.showToast({
									title: '点赞成功',
									icon: 'success'
								})
							}
						}
					})
				} else if (param == 'unlike') {
					let target = this.$global.personInfo.gender === 0 ? 1 : 0
					uni.request({
						url: config.baseUrl + 'home/rank',
						method: 'POST',
						data: {
							"gender": target
						},
						success: (res) => {
							// console.log(res);
							let random = that.getRandomInt(0, res.data.length - 1)
							// console.log(res.data[random]);
							that.ranker = res.data[random]
							that.ranker.imgurl = config.baseUrl + res.data[random].imgurl
							// console.log(that.ranker);
						}
					})
				}
				console.log(param);
			}
		}
	}
</script>

<style>
	.container {
		height: 94vh;
		width: 100%;
		background-color: #fbffd3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
		/* 水平居中 */
	}

	.name {
		margin-left: 42%;
		font-family: PingFang;
		/* 设置字体 */
		font-size: 24px;
		/* 设置字体大小 */
		font-weight: bold;
		/* 设置字体粗细 */
		color: #333;
		/* 设置字体颜色 */
	}

	.head {
		height: 75vh;
		width: 75%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.image {
		width: 70%;
		height: 70%;
		margin-left: 15%;
		border-radius: 15rpx;
	}

	.operation {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		/* 按钮等间距排列 */
		width: 100%;
	}

	.btn-like {
		border: pink solid 5rpx;
		padding: 5rpx;
		border-radius: 50%;
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-unlike {
		/* background-color: #cac5bc; */
		border: #cac5bc solid 5rpx;
		padding: 7rpx;
		border-radius: 50%;
		width: 145rpx;
		height: 145rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>